<template>
	<u-popup :show="showOli" :closeable="closeable" mode="bottom" @close="close">
		<view class="title">
			选择船舶名称
		</view>
		<scroll-view scroll-y="true" class="actionheight" v-if="oliList && oliList.length>0">
			<view class="item" v-for="(item,index) in oliList" :key="index" @click="changeItem(item)">
				{{item.boatName}}
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	import {
		listOil
	} from '@/api/common.js'
	export default {
		props: {
			showOli: {
				type: Boolean,
				default: false
			} 
		},

		data() {
			return {
				closeable: true,
				oliList:[]
			}
		},
		mounted() {
			this.getOliList()
		},

		methods: {
			close() {
				this.$emit('closeOli')
			},
			changeItem(item) {
				this.$emit('changeItem', item)
			},
			// /** 查询油量列表 */
			getOliList() {
				listOil().then(response => {
					const {
						data
					} = response
					this.oliList = data||[]
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		color: #303133;
		font-weight: bold;
		text-align: center;
		padding: 24rpx 60rpx
	}

	.actionheight {
		height: 60vh;
		 

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #F5F7F9;
			font-size: 30rpx;
			padding: 30rpx 0;

			&:last-child {
				border-bottom: 1rpx solid #F5F7F9;
			}
		}
	}
</style>
